<template>
	<view class="gradient-container">
		<view class="status_bar"></view>
		<view class="pagetitle">
			<uni-icons type="back" style="position:absolute; left: 10pt;bottom: 10pt;" size="16pt" @click="back_my"></uni-icons>
			<view class="center" style="height: 44pt;width: 120pt;">
				<text style="margin: 12pt 0pt;font-size: 16pt;">{{shopname}}</text>
			</view>
		</view>
		<view style="margin: 24pt 16pt 0pt;display: flex; justify-content: center;align-items: center;flex-direction: column;background-color: white;border-radius: 10pt;">
		
		<view style="width: 91%;height: 181pt;border: outset #f33;">
			<text style="text-align: center;width:100%">图表占位</text>
		</view>
		
			<view style="display:flex;justify-content: center;flex-direction: row;margin-bottom: 16pt;color: rgba(0, 0, 0, 0.40);align-items: center;">
				<view style="">
					<view :class="['text_padding',{blue:show_modle===0}]" @click="showpage(0)"><text class="text">日收益</text></view>
				</view>
				<view>
					<view :class="['text_padding',{blue:show_modle===1}]" @click="showpage(1)"><text class="text">月收益</text></view>
				</view>
				<view>
					<view :class="['text_padding',{blue:show_modle===2}]" @click="showpage(2)"><text class="text">年收益</text></view>
				</view>
			</view>
			
		<view style="width: 100%;height: 56pt;margin: 8pt 0pt;" v-for="(item,index) in Order_Records" v-if="show_modle===0">
			<view style="width: 100%;height: 38pt;margin:9pt 0pt;flex-direction: row;display: flex;" >
				
				<view style="width: 56%;height: 38pt;flex-direction: row;display: flex;">

					<view style="flex-direction: column;display: flex;">
					<text style="font-size:14pt ;color:rgba(0, 0, 0, 0.80);">订单-{{item.Order_Number}}</text>
					<text style="font-size:10pt ;color:rgba(0, 0, 0, 0.40);">{{item.Order_Time}}</text></view>
				</view>
		
				<view style="width: 45%;height: 38pt;display: flex;justify-content: center;align-items: center;">
					<view style="flex-direction: column;display: flex;align-items: flex-end;">
					<text style="font-size:14pt ;
					color:rgba(0, 0, 0, 0.80);
					font-weight: bold;line-height: 22pt;">{{item.Order_Amount}}</text>
					<text style="font-size:10pt ;color:rgba(0, 0, 0, 0.40);">交易额</text></view>
				</view>
			</view>
		</view>
		
		<view style="width: 100%;height: 56pt;margin: 8pt 0pt;" v-for="(item,index) in Order_Records" v-if="show_modle===1">
			<view style="width: 100%;height: 38pt;margin:9pt 0pt;flex-direction: row;display: flex;" >
				
				<view style="width: 56%;height: 38pt;flex-direction: row;display: flex;">

					<view style="flex-direction: column;display: flex;">
					<text style="font-size:14pt ;color:rgba(0, 0, 0, 0.80);">订单-{{item.Order_Number}}</text>
					<text style="font-size:10pt ;color:rgba(0, 0, 0, 0.40);">{{item.Order_Time}}</text></view>
				</view>
		
				<view style="width: 45%;height: 38pt;display: flex;justify-content: center;align-items: center;">
					<view style="flex-direction: column;display: flex;align-items: flex-end;">
					<text style="font-size:14pt ;
					color:rgba(0, 0, 0, 0.80);
					font-weight: bold;line-height: 22pt;">{{item.Order_Amount}}</text>
					<text style="font-size:10pt ;color:rgba(0, 0, 0, 0.40);">交易额</text></view>
				</view>
			</view>
		</view>
		
		<view style="width: 100%;height: 56pt;margin: 8pt 0pt;" v-for="(item,index) in Order_Records" v-if="show_modle===2">
			<view style="width: 100%;height: 38pt;margin:9pt 0pt;flex-direction: row;display: flex;" >
				
				<view style="width: 56%;height: 38pt;flex-direction: row;display: flex;">

					<view style="flex-direction: column;display: flex;">
					<text style="font-size:14pt ;color:rgba(0, 0, 0, 0.80);">订单-{{item.Order_Number}}</text>
					<text style="font-size:10pt ;color:rgba(0, 0, 0, 0.40);">{{item.Order_Time}}</text></view>
				</view>
		
				<view style="width: 45%;height: 38pt;display: flex;justify-content: center;align-items: center;">
					<view style="flex-direction: column;display: flex;align-items: flex-end;">
					<text style="font-size:14pt ;
					color:rgba(0, 0, 0, 0.80);
					font-weight: bold;line-height: 22pt;">{{item.Order_Amount}}</text>
					<text style="font-size:10pt ;color:rgba(0, 0, 0, 0.40);">交易额</text></view>
				</view>
			</view>
		</view>
		
		</view>
	</view>
</template>


<script setup>
// 正确的导入方式
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const queryParams = ref(null);
let shopname=ref('');
onLoad((options) => {
  queryParams.value = options;
  console.log('接收到的参数:', queryParams.value.name);
  shopname.value=options.name|| '默认标题';
});


const back_my=()=>{
	uni.redirectTo({
		url:'/pages/guanliyuan/my_earings'
	});
};
	const show_modle=ref(0);
	const showpage=(index)=>{
		show_modle.value=index;
	};
	
	const Order_Records=ref([
		{
		Order_Number:'28839344',
		Order_Time:'2025-2-22 12:11:33',
		Order_Amount:2133
	},		{
		Order_Number:'28839344',
		Order_Time:'2025-2-22 12:11:33',
		Order_Amount:2133
	},		{
		Order_Number:'28839344',
		Order_Time:'2025-2-22 12:11:33',
		Order_Amount:2133
	},		{
		Order_Number:'28839344',
		Order_Time:'2025-2-22 12:11:33',
		Order_Amount:2133
	},		{
		Order_Number:'28839344',
		Order_Time:'2025-2-22 12:11:33',
		Order_Amount:2133
	},
	
	])
</script>
<style>
	.center{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.pagetitle{
			position: relative;
			display: flex;
			width: 100%;
			height: 44pt;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.list{
			background-color: #ffffff;
			border-radius: 10pt;
			box-shadow: 2pt 2pt 4pt #e1e1e1;
			margin: 8pt 0pt;
		}
		.blue{
			color:rgba(0, 122, 255, 1) ;
			background: linear-gradient(rgba(0, 122, 255, 1),rgba(0, 122, 255, 1)) no-repeat;
			background-size: 60pt 2pt;
			background-position: 10pt bottom;
		}
	.text{
		height: 22pt;
		width: 42pt;
		font-size: 14pt;
		line-height: 22pt;
	
	}
	.text_padding{
		margin:8pt 17pt 6pt 18pt ;
		padding:8pt 16pt 6pt ;
		white-space: nowrap;
	}
</style>